import React, { useEffect, useState } from 'react';
import { getSizeImage, formatCount } from '@/utils/format.js';
import CustomIcon from '@/components/CustomIcon';
import s from './style.less';
import { useHistory } from 'react-router-dom';

const SongItem = (props) => {
  const history = useHistory();

  const toSingle = (id)=>{
    history.push('/singlelist/'+id);
  }

  return (
    <div className={s.themeCoverWrapper} onClick = {()=>{toSingle(props.itemId)}}>
      <div className={s.coverTop}>
        <img src={getSizeImage(props.pic, 150)} alt="" />
        <div className={s.cover}>
          <CustomIcon type="icon-play" className={s.iconPlay} />
          <span className={s.countNum}>{formatCount(props.countNum)}</span>
        </div>
      </div>
      <div className={s.remark}>
        <div className={s.coverBottom}>{props.name}</div>
        <div className={s.coverSource}>by {props.copywriter}</div>
      </div>
    </div>
  )
}

export default SongItem;